import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_project/components/ImageCases.dart';

class TabsCase extends StatefulWidget {
  const TabsCase({Key? key}) : super(key: key);

  @override
  _TabsCaseState createState() => _TabsCaseState();
}

class _TabsCaseState extends State<TabsCase> {
  List tabList = [
    {
      "label": '首页',
      "icon": '/tabbar/home.png',
      "activeIcon": '/tabbar/home-active.png'
    },
    {
      "label": '分类',
      "icon": '/tabbar/cate.png',
      "activeIcon": '/tabbar/cate-active.png'
    },
    {
      "label": '购物车',
      "icon": '/tabbar/cart.png',
      "activeIcon": '/tabbar/cart-active.png'
    },
    {
      "label": '我的',
      "icon": '/tabbar/user.png',
      "activeIcon": '/tabbar/user-active.png'
    }
  ];
  int currentIndex = 0;
  Widget getBody() {
    if (currentIndex == 0) {
      return Center(
        child: Text('首页'),
      );
    } else if (currentIndex == 1) {
      return Center(
        child: Text('分类'),
      );
    } else if (currentIndex == 2) {
      return Center(
        child: Text('购物车'),
      );
    } else {
      return Center(
        child: Text('我的'),
      );
    }
  }

  List<BottomNavigationBarItem> getTabBarItems() {
    List<BottomNavigationBarItem> list = [];
    for (var i = 0; i < tabList.length; i++) {
      list.add(BottomNavigationBarItem(
          icon: Image.asset(
            tabList[i]["icon"],
            width: 40,
            height: 40,
          ),
          label: tabList[i]["label"],
          activeIcon: Image.asset(
            tabList[i]["activeIcon"],
            width: 40,
            height: 40,
          )));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar'),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
      ),
      // body: getBody(),
      body: IndexedStack(
        index: currentIndex,
        children: const [
          ImageCases(), //首页
          Center(child: Text('分类')),
          Center(child: Text('购物车')),
          Center(child: Text('我的'))
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: getTabBarItems(),
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}
